<script setup>
    import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
    import { useRouter } from 'vue-router';
    const axios = getCurrentInstance().proxy.$http;
    const router = useRouter();

    const categories = reactive({}) 
    onMounted(async () => {
        let { data:res } =  await axios.get('/playlist/catlist');
        let index = 0;
        for(let key in res.categories) {
            index ++;
            categories[key] = {
                id: key,
                name: res.categories[key],
                url: require(`../../../assets/img/songSheet-${index}.png`),
                data: res.sub.filter(value => value.category == key) 
            } 
        }
    })

    // 控制分类对话框的显示和隐藏
    const dialog = ref(false);
    const dialogShow = key => dialog.value = key; 
    document.onclick = () => dialog.value = false;


    // 选择分类
    const categoriesList = ref();
    const selectCategories = async (name) => { 
        router.push({ name: 'songSheet', query: { cat: name }});
        let { data } = await axios.get(`/top/playlist?cat=${name}&limit=99999`);
        categoriesList.value = data;
        console.log(categoriesList.value);
    }
    selectCategories('华语')


    // 跳转到播放列表
    const toPlayList = (id) => {
        router.push({name: 'playlist', query: {id}})
    }


</script>

<template>
    <div class="main">
        <header>
            <article>
                <span class="type">{{categoriesList?.cat}}</span> 
                <div 
                    @click.stop="dialogShow(!dialog)"
                    class="btn"
                >
                    <span>选择分类</span>
                    <img src="../../../assets/img/bottom.png" alt="">
                </div>
                <div class="dialog" v-show="dialog" @click.stop>
                    <header>
                        <div class="all">全部风格</div>
                    </header>
                    <section>
                        <div v-for="item in categories">
                            <div class="left">
                                <img :src="item.url" alt="">
                                {{item.name}}
                            </div>
                            <div class="right">
                                <template v-for="(value, index) in item.data">
                                    <span class="link" @click="selectCategories(value.name); dialog=false">{{value.name}}</span>
                                    <span class="line" v-if="item.data.length-1 != index">|</span>
                                </template>
                            </div>
                        </div>
                    </section>
                </div>
            </article>
            <aside>
                <div>热门</div>
            </aside>
        </header>
        <ul class="content">
            <li 
                v-for="item of categoriesList?.playlists"
                @click="toPlayList(item.id)"
            >
                <img :src="item.coverImgUrl">
                <div>
                    <span>{{item?.name}}</span>
                </div>
            </li>
        </ul>
    </div>
    <UserFooter></UserFooter>
</template>

<style lang="less" scoped>
    header{
        height: 45px;
        border-bottom: 2px solid #c20c0c;
        display: flex;
        align-items: center;
        article{
            display: flex;
            align-items: center;
            position: relative;
            .type{
                font-size: 23px;
                margin-right: 15px;
            }
            .btn{
                user-select: none;
                padding: 5px 15px;
                border: 1px solid #ccc;
                border-radius: 3px;
                color: rgb(58, 58, 218);
                font-size: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                background: linear-gradient(to bottom, white, #eee);
                span{
                    margin-left: 10px;
                }
                img{
                    width: 20px;
                }
            }
            .dialog{
                position: absolute;
                background-color: white;
                top: 45px;
                width: 700px;
                height: 400px;
                border: 1px solid #ccc;
                left: -20px;
                box-shadow: 0px 1px 10px rgb(167, 167, 167);
                border-radius: 5px;
                cursor: default;
                display: flex;
                flex-direction: column;
                header{
                    height: 50px;
                    border-bottom: 1px solid #ccc;
                    flex-shrink: 0;
                    .all{
                        margin-left: 20px;
                        padding: 3px 10px;
                        background: linear-gradient(to  bottom, white, #eee);
                        cursor: pointer;
                        user-select: none;
                        border: 1px solid #ccc;
                        border-radius: 2px;
                        font-size: 12px;
                    }
                }

                section{
                    flex-grow: 1;
                    border-bottom-left-radius: 5px;
                    border-bottom-right-radius: 5px;
                    display: flex;
                    flex-direction: column;
                    div{
                        flex-grow: 1;
                        overflow: hidden;
                        .left{
                            width: 10%;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            float: left;
                            font-size: 13px;
                            border-right: 1px solid #ccc;
                            border-bottom: 1px solid #ccc;
                            box-sizing: border-box;
                            img{
                                width: 13px;
                                margin-right: 5px;
                            }
                        }
                        .right{
                            height: 100%;
                            width: 90%;
                            float: left;
                            white-space: pre-wrap;
                            font-size: 10px;
                            border-right: 1px solid #ccc;
                            border-bottom: 1px solid #ccc;
                            box-sizing: border-box;
                            padding-left: 5px;
                            span{
                                padding: 5px 5px;
                                display: block;
                                float: left;
                                &:hover{
                                    text-decoration: underline;
                                }
                                line-height: 38px;
                            }
                            .link{
                                cursor: pointer;
                                color: #555;
                            }
                            .line{
                                color: #ccc;
                            }
                        }
                    }
                }
            }
        }
        aside{
            margin-left: auto;
            div{
                padding: 5px 10px; 
                background: linear-gradient(to bottom, rgb(211, 37, 37), rgb(129, 39, 39));
                border-radius: 3px;
                color: white;
                font-size: 10px;
                border: 1px solid white;
                cursor: pointer;
                user-select: none;
            }
        }
    }

    .content{
        width: 100%;
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(5, 140px);
        justify-content: space-between;
        row-gap: 10px;
        li{
            height: 190px;
            display: grid; 
            grid-template-rows: 140px 1fr;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;
            }
            div{
                display: grid;
                grid-template-rows: repeat(2, 1fr);
                span{
                    display: block;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    line-height: 25px;
                    cursor: pointer;
                    font-size: 13px;
                    &:hover{
                        text-decoration: underline;
                    }
                }
            }
        }
    }
</style>